<template>
    <div>
        <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="基础设置">
                <el-card class="!border-none mb-4">
                    <el-form ref="formRef" class="ls-form" :model="formData" label-width="120px">
                        <el-form-item label="SEO名称">
                            <div class="w-[800px] display">
                                <el-input class="w-[540px]" style="width:600px !important;" v-model="formData.seo_name" placeholder="请输入SEO名称" show-word-limit />
                                <div class="border" @click="copy(`{$webConfig['seo_name']}`)">{$webConfig['seo_name']}</div>
                            </div>
                        </el-form-item>
                        <el-form-item label="SEO关键词">
                            <div class="w-[800px] display">
                                <el-input class="w-[600px]" style="width:600px !important;" v-model="formData.seo_kword" placeholder="请输入SEO关键词" show-word-limit />
                                <div class="border"  @click="copy(`{$webConfig['seo_kword']}`)">{$webConfig['seo_kword']}</div>
                            </div>
                        </el-form-item>
                        <el-form-item label="SEO描述">
                            <div class="w-[800px] display">
                                <el-input class="w-[600px]" style="width:600px !important;" v-model="formData.seo_brief" placeholder="请输入SEO描述" show-word-limit :rows="4"
                                    type="textarea" />
                                <div class="border" @click="copy(`{$webConfig['seo_brief']}`)">{$webConfig['seo_brief']}</div>
                            </div>
                        </el-form-item>
                        <el-form-item label="底部版权">
                            <div class="w-[800px] display">
                                <el-input class="w-[600px]" style="width:600px !important;" v-model="formData.copyright" placeholder="请输入底部版权" show-word-limit />
                                <div class="border" @click="copy(`{$webConfig['copyright']}`)">{$webConfig['copyright']}</div>
                            </div>
                        </el-form-item>
                        <el-form-item label="ICP备案号">
                            <div class="w-[800px] display">
                                <el-input class="w-[600px]" style="width:600px !important;" v-model="formData.icp" placeholder="请输入ICP备案号" show-word-limit />
                                <div class="border" @click="copy(`{$webConfig['icp']}`)">{$webConfig['icp']}</div>
                            </div>
                        </el-form-item>
                        <el-form-item label="公安备案号">
                            <div class="w-[800px] display">
                                <el-input class="w-[600px]" style="width:600px !important;" v-model="formData.curity" placeholder="请输入公安备案号" show-word-limit />
                                <div class="border" @click="copy(`{$webConfig['curity']}`)">{$webConfig['curity']}</div>
                            </div>
                        </el-form-item>
                        <el-form-item label="联系电话">
                            <div class="w-[800px] display">
                                <el-input class="w-[600px]" style="width:600px !important;" v-model="formData.tel" placeholder="请输入联系电话" show-word-limit />
                                <div class="border" @click="copy(`{$webConfig['tel']}`)">{$webConfig['tel']}</div>
                            </div>
                        </el-form-item>
                        <el-form-item label="400电话">
                            <div class="w-[800px] display">
                                <el-input class="w-[600px]" style="width:600px !important;" v-model="formData.tel400" placeholder="请输入400电话" show-word-limit />
                                <div class="border" @click="copy(`{$webConfig['tel400']}`)">{$webConfig['tel400']}</div>
                            </div>
                        </el-form-item>
                        <el-form-item label="邮箱">
                            <div class="w-[800px] display">
                                <el-input class="w-[600px]" style="width:600px !important;" v-model="formData.mail" placeholder="请输入邮箱" show-word-limit />
                                <div class="border" @click="copy(`{$webConfig['mail']}`)">{$webConfig['mail']}</div>
                            </div>
                        </el-form-item>
                        <el-form-item label="公司地址">
                            <div class="w-[800px] display">
                                <el-input class="w-[600px]" style="width:600px !important;" v-model="formData.address" placeholder="请输入公司地址" show-word-limit />
                                <div class="border" @click="copy(`{$webConfig['address']}`)">{$webConfig['address']}</div>
                            </div>
                        </el-form-item>
                        <el-form-item v-for="(item,index) in list.lists" :label="item.cus_name">
                            <div class="w-[800px] display" v-if="item.cus_type == '1'">
                                <el-input class="w-[400px]" style="width:480px !important;" v-model="item.value" show-word-limit />
                                <div class="border" @click="copys(item.cus_render_name)">{$webConfig[' {{ item.cus_render_name }}  ']}</div>
                                <el-button type="danger" @click="deleteHandler(item.cus_field_name)">删除</el-button>
                            </div>
                            <div class="w-[800px] display" v-if="item.cus_type == '2'">
                                <el-input class="w-[400px]" style="width:400px !important;" v-model="item.value" show-word-limit :rows="4" type="textarea"/>
                                <div class="border"  @click="copys(item.cus_render_name)">{$webConfig[' {{ item.cus_render_name }}  ']}</div>
                                <el-button type="danger" @click="deleteHandler(item.cus_field_name)">删除</el-button>
                            </div>
                            <div class="w-[800px] dis" v-if="item.cus_type == '3'">
                                <material-picker
                                    v-model="item.value"
                                    :limit="1"
                                />
                                <div class="border" style="margin-left: 20px; height: 34px;"  @click="copys(item.cus_render_name)">{$webConfig[' {{ item.cus_render_name }}  ']}</div>
                                <el-button type="danger" style="margin-left: 20px;"  @click="deleteHandler(item.cus_field_name)">删除</el-button>
                            </div>
                            <div class="w-[800px]" v-if="item.cus_type == '4'">
                                <div class="dis" style="width: 800px;">
                                    <material-picker
                                    v-model="item.value"
                                    :limit="1"
                                    :type="'file'"
                                    />
                                    <div class="border" style="margin-left: 20px;height: 34px;"  @click="copys(item.cus_render_name)">{$webConfig[' {{ item.cus_render_name }}  ']}</div>
                                    <el-button type="danger" style="margin-left: 20px;"  @click="deleteHandler(item.cus_field_name)">删除</el-button>
                                </div>
                                <el-input v-model="item.value" disabled placeholder="请选择上传文件" show-word-limit/>
                            </div>
                        </el-form-item>
                    </el-form>
                    <footer-btns>
                        <el-button type="primary" @click="handleSubmit">保存</el-button>
                    </footer-btns>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="高级设置">
                <el-card class="!border-none mb-4">
                    <el-form ref="formRef" class="ls-form" :model="formData" label-width="120px">
                        <el-form-item label="pc网站模版">
                            <div class="w-[800px] display">
                                <el-select class="w-[280px]" v-model="formData.pc_plate"  placeholder="请输入pc网站模板">
                                    <el-option
                                        v-for="(item, key) in list.list"
                                        :key="key"
                                        :label="item.plate"
                                        :value="item.plate"
                                    />
                                </el-select>
                                <!-- <el-input v-model="formData.pc_plate" placeholder="请输入pc网站模板" show-word-limit /> -->
                            </div>
                        </el-form-item>
                        <el-form-item label="手机页面模版">
                            <div class="w-[800px]">
                                <el-select class="w-[280px]" v-model="formData.m_plate"  placeholder="请输入手机页面模版">
                                    <el-option
                                        v-for="(item, key) in list.list"
                                        :key="key"
                                        :label="item.plate"
                                        :value="item.plate"
                                    />
                                </el-select>
                            </div>
                        </el-form-item>
                                <!-- <el-form-item  label="显示">
                                    <div class="w-[800px]">
                                        <el-radio-group
                                            v-model="
                                                formData.is_state
                                            "
                                        >
                                            <el-radio :label="1">开启</el-radio>
                                            <el-radio :label="2">关闭</el-radio>
                                        </el-radio-group>
                                    </div>
                                </el-form-item> -->
                        <el-form-item label="违禁词过滤">
                            <div class="w-[800px]">
                                <el-input v-model="formData.bited" placeholder="违禁词过滤" show-word-limit :rows="4"
                                    type="textarea" />
                            </div>
                        </el-form-item>
                    </el-form>
                    <footer-btns>
                        <el-button type="primary" @click="handleSubmit">保存</el-button>
                    </footer-btns>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="自定义设置">
                <el-card class="!border-none mb-4">
                    <el-form ref="formRef" class="ls-form" :model="lists" label-width="120px">
                        <el-form-item label="字段名" prop="name">
                            <div class="w-[800px]">
                                <el-input v-model="lists.cus_field_name" placeholder="请输入字段名" show-word-limit />
                            </div>
                        </el-form-item>
                        <el-form-item label="栏目类型" prop="name">
                            <el-select class="w-[280px]" v-model="lists.cus_type">
                                <el-option
                                    :key="1"
                                    label="单行文本"
                                    :value="1"
                                />
                                <el-option
                                    :key="2"
                                    label="多行文本"
                                    :value="2"
                                />
                                <el-option
                                    :key="3"
                                    label="图片"
                                    :value="3"
                                />
                                <el-option
                                    :key="4"
                                    label="文件"
                                    :value="4"
                                />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="栏目名" prop="name">
                            <div class="w-[800px]">
                                <el-input v-model="lists.cus_name" placeholder="请输入栏目名" show-word-limit />
                            </div>
                        </el-form-item>
                        <el-form-item label="渲染名" prop="name">
                            <div class="w-[800px]">
                                <el-input v-model="lists.cus_render_name" placeholder="请输入渲染名" show-word-limit />
                            </div>
                        </el-form-item>
                    </el-form>
                    <footer-btns>
                        <el-button type="primary" @click="Custum">保存</el-button>
                    </footer-btns>
                </el-card>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script lang="ts" setup>
import feedback from '@/utils/feedback'
import { getconfig, setConfig,setCustum,getCustum,setCustumConfig,delCustum,plate } from '@/api/application/website/website'
const activeName = ref('0')
const formData = ref({
    id: "",
    seo_name: "",
    seo_kword: "",
    seo_brief: "",
    copyright: "",
    icp: "",
    curity: "",
    tel: "",
    tel400: "",
    mail: "",
    address: "",
    pc_plate: "",
    m_plate: "",
    is_state: 2,
    bited: ""
})
const router = useRouter()
const lists = ref({
    cus_field_name:"",
    cus_type:"",
    cus_name:"",
    cus_render_name:"",
})
const list = ref({
    lists:[
        {
            cus_field_name:"",
            cus_name:"",
            cus_render_name:"",
            cus_type:"",
            value:""
        }
    ],
    list:[
        {
            plate:""
        }
    ]
})
const copys = (items:any)=>{
    const abc = "{$webConfig['" + items + "']}"
    var input = document.createElement('textarea')
    input.value = abc
    document.body.appendChild(input)
    input.select()
    document.execCommand('copy')
    feedback.msgSuccess("复制成功")
    document.body.removeChild(input)
}
const getLists = async () => {
    const results = await getconfig({})
    if(results != 0){
        formData.value = results
        console.log(formData.value)
    }
    const lists = await getCustum({})
    list.value.lists = lists
    const data = await plate({})
    list.value.list = data
}
const handleSubmit = async () => {
    console.log(formData.value)
    await setConfig({...formData.value,id:1})
    await setCustumConfig({list:list.value.lists})
    getLists()
}
const Custum = async ()=>{
    const results = await setCustum(lists.value)
    lists.value.cus_field_name = ""
    lists.value.cus_type = ""
    lists.value.cus_name = ""
    lists.value.cus_render_name = ""
    getLists()

}
const deleteHandler = async(item:any)=>{
    await feedback.confirm('确定要删除？')
    await delCustum({ field_name:item })
    getLists()
}
const copy = (items:any)=>{
    var input = document.createElement('textarea')
    input.value = items
    document.body.appendChild(input)
    input.select()
    document.execCommand('copy')
    feedback.msgSuccess("复制成功")
    document.body.removeChild(input)
}
getLists()
</script>
<style lang="scss" scoped>
.display{
    display: flex;
    align-items: center;
}
.dis{
    display: flex;
    align-items: center;
}
.border{
    border: 1px solid rgb(238, 238, 238);
    cursor: pointer;    
    color: #666;
    padding: 0px 6px;
    font-size: 12px;
    text-align: center;
    border-radius: 2px;
}
</style>